<!-- 学习统计（学习状态） -->
<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-button type="primary" @click="total">综合成绩</el-button>
      <el-button type="primary" @click="learntime">学习时长</el-button>
      <el-button type="primary" @click="taskprogress">任务进度</el-button>
      <el-button type="primary" @click="learntask">学习任务</el-button>
    </div>
    <div class="top">
      <!-- 雷达图 -->
      <radar style="margin-right: 200px;" :personal="radarPersonal" :average="radarAverage"></radar>
      <!-- 折线图 -->
      <linecharts :xdata="xdata" :ydata="ydata"></linecharts>
    </div>
    <div class="bottom">
      <!-- 饼状图 -->
      <pinecharts :piedata="piedata" style="margin-right: 200px;"></pinecharts>

      <!-- 自定义进度条 -->
      <div class="learntasks">
        <h3>学习任务</h3>
        <ul>
          <li @mouseenter="progressAnimation(item, index)" v-for="(item, index) in progress" :key="index"><span
              class="label">{{ item.title }}</span>
            <div class="prossbox"><el-progress :text-inside="true" :stroke-width="20" :percentage="item.pronum"
                status="exception" /></div>
            <span class="percentbox">{{ item.progress }}</span>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue'

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar } = storeToRefs(user)

// 引入自定义雷达组件数据视图
import radar from '@/components/echarts/radar.vue';
import linecharts from '@/components/echarts/linecharts.vue';
import pinecharts from '@/components/echarts/pinecharts.vue';

// 雷达图个人成绩、班级平均成绩
// [知识类,技能类,素养类]
let radarPersonal = ref([60, 80, 40])
let radarAverage = ref([100, 90, 60])

// 折线图X轴、Y轴数据
let xdata = ref(['2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '本周'])
let ydata = ref([30, 50, 60, 70, 100, 90, 30])

// 饼状图数据
let piedata = ref([
  { value: 190, name: '待完成' },
  { value: 100, name: '已完成' },
])

// 进度图数据
let progress = ref([
  {
    title: '章节小测',
    pronum: 80,        // 百分比数
    progress: '4/5',  // 已完成任务点/总任务点
  },
  {
    title: '互动测验',
    pronum: 50,        // 百分比数
    progress: '5/10',  // 已完成任务点/总任务点
  },
  {
    title: '在线考试',
    pronum: 40,        // 百分比数
    progress: '4/6',  // 已完成任务点/总任务点
  },
  {
    title: '实训任务',
    pronum: 70,        // 百分比数
    progress: '7/10',  // 已完成任务点/总任务点
  },
  {
    title: '仿真任务',
    pronum: 33.3,        // 百分比数
    progress: '1/3',  // 已完成任务点/总任务点
  },
])
const emit = defineEmits(['handleRouter'])
let letgo;

onMounted(() => {
  // 调用防抖函数 生成操作方法
  letgo = debounce(changePronum, 300)
})

function progressAnimation(item, index) {
  let originval = item.pronum
  letgo(index, originval)
}

function changePronum(index, originval) {
  console.log(index, originval);
  progress.value[index].pronum = originval
}

function debounce(fn, wait) {
  let timeout = null;

  return function () {
    let context = this;
    let args = arguments;

    if (timeout) return;
    progress.value[args[0]].pronum = 0
    timeout = setTimeout(() => {
      clearTimeout(timeout)
      timeout = null
      fn.apply(context, args);
    }, wait);
  };
}

// 综合成绩
function total() {
  emit('handleRouter', {
    componentName: 'Totalgrade',
    test: 1
  }
  )
}

// 学习时长
function learntime() {
  emit('handleRouter', {
    componentName: 'Learntime',
    test: 1
  }
  )
}

// 任务进度
function taskprogress() {
  emit('handleRouter', {
    componentName: 'Taskprogress',
    test: 1
  }
  )
}

// 学习任务
function learntask() {
  emit('handleRouter', {
    componentName: 'Learntask',
    test: 1
  }
  )
}


onActivated(() => {
  // 挂载后告知父组件
  emit('handleRouter', {
    componentName: 'Learntotal',
    test: 1
  }
  )
})

</script>

<style scoped>
.top {
  display: flex;
}

.bottom {
  display: flex;
}
</style>

<style scoped>
.breadbox {
  display: flex;
  height: 40px;
  align-items: center;
}

.showbox {
  width: 100%;
  height: 100%;
}
</style>

<style>
.learntasks .el-progress-bar__outer {
  background-color: #199ed8;
}

.learntasks .el-progress.is-exception .el-progress-bar__inner {
  background-color: #ff9966;
}
</style>

<!-- 学习任务 -->
<style scoped>
.learntasks {
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding-top: 14px;
  padding-left: 30px;
}

.learntasks h3 {
  font-size: 18px;
  font-weight: 600;
  padding-left: 5px;
}

.learntasks ul li {
  display: flex;
  align-items: center;
  /* width: 500px; */
  width: 458px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  /* background-color: pink; */
  margin: 5px 5px;
}

.learntasks ul li .prossbox {
  width: 300px;
  margin-left: 20px;
  margin-right: 20px;
}

.percentbox {
  font-size: 13px;
}
</style>